<html>
  <head>
    <title>Vega Examples</title/>
    <link rel="stylesheet" href="css/vega.css"/>
    <script src="lib/d3.v3.min.js"></script>
    <script src="lib/d3.geo.projection.min.js"></script>
    <script src="lib/d3.layout.cloud.js"></script>
    <script src="lib/specs.js"></script>
    <script src="../vega.js"></script>
    <style>
* { font-family: Helvetica Neue, Arial, sans-serif; font-size: 14px; }
#ctrl { margin-bottom: 1em; }
    </style>
  </head>
  <body>
    <div id="ctrl">
      Vega Spec:
      <select id="specs">
        <option value="-----">-----</option>
      </select>
    </div>
    <div id="vis"></div>
<script type="text/javascript">
// initialize spec drop-down menu
d3.select("#specs")
  .on("change", function() {
    d3.select("#vis").selectAll("*").remove();
    var idx = this.selectedIndex;
    if (idx > 0) parse("vega/" + SPECS[idx-1] + ".json");
  })
  .selectAll("option.spec")
  .data(SPECS)
 .enter().append("option")
  .attr("value", function(d) { return d; })
  .text(function(d) { return d; });  

// parse a spec and create a visualization view
function parse(spec) {
  vg.parse.spec(spec, function(chart) {
    self.view = chart({el:"#vis"}).update();
  });
}
</script>
  </body>
</html>